import * as THREE from 'three';
import dat from 'dat.gui';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export function init07(width, height) {
  // 创建一个场景，它将包含我们所有的元素，如对象，相机和灯光
  const scene = new THREE.Scene();

  // 创建一个摄像机，它定义了我们正在查看的位置
  let camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

  // 创建一个渲染器和设置大小
  const renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.setSize(width, height);

  // 创建平面
  const planeGeometry = new THREE.PlaneGeometry(180, 180);
  const planeMaterial = new THREE.MeshLambertMaterial({
    color: 0xffffff
  });
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);

  // 旋转并定位平面
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 0;
  plane.position.y = 0;
  plane.position.z = 0;
  // 将平面添加到场景中
  scene.add(plane);

  // 将相机定位并指向场景的中心
  camera.position.set(120, 60, 180);
  camera.lookAt(scene.position);

  // 添加平行光源
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
  directionalLight.position.set(-20, 40, 60);
  scene.add(directionalLight);

  // 添加光源
  const ambientLight = new THREE.AmbientLight(0x292929);
  scene.add(ambientLight);

  // 用正方体铺满平面
  const box = new THREE.BoxGeometry(4, 4, 4);

  for (let i = 0; i < planeGeometry.parameters.height / 5; i++) {
    for (let j = 0; j < planeGeometry.parameters.width / 5; j++) {
      const rnd = Math.random() * 0.75 + 0.25;
      const material = new THREE.MeshBasicMaterial();
      material.color = new THREE.Color(rnd, 0, 0);
      const mesh = new THREE.Mesh(box, material);
      mesh.position.z = -(planeGeometry.parameters.height / 2) + 2 + i * 5;
      mesh.position.x = -(planeGeometry.parameters.width / 2) + 2 + j * 5;
      mesh.position.y = 2;
      scene.add(mesh);
    }
  }

  // 视角操作
  let orbit = new OrbitControls(camera, renderer.domElement);

  const controls = new (function() {
    this.perspective = 'Perspective';
    this.switchCamera = function() {
      if (camera instanceof THREE.PerspectiveCamera) {
        camera = new THREE.OrthographicCamera(
          window.innerWidth / -16,
          window.innerWidth / 16,
          window.innerHeight / 16,
          window.innerHeight / -16,
          -200,
          500
        );
        camera.position.x = 120;
        camera.position.y = 60;
        camera.position.z = 180;
        camera.lookAt(scene.position);
        this.perspective = 'Orthographic';
      } else {
        camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
        camera.position.x = 120;
        camera.position.y = 60;
        camera.position.z = 180;
        camera.lookAt(scene.position);
        this.perspective = 'Perspective';
      }
      // 视角操作
      orbit = new OrbitControls(camera, renderer.domElement);
    };
  })();

  const gui = new dat.GUI();
  gui.add(controls, 'switchCamera');
  gui.add(controls, 'perspective').listen();

  // 将呈现器的输出添加到html元素中
  document.getElementById('webgl-output').appendChild(renderer.domElement);

  // 浏览器大小自适应
  window.addEventListener('resize', onResize, false);

  render();

  function render() {
    orbit.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }

  function onResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(width, height);
  }
}
